import './Home.css'
import React from 'react'
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import Header from '../components/Header'
import Footer from '../components/Footer'
import SideMenu from '../components/SideMenu'
import Lunbo from '../components/Lunbo'
import Production from '../components/Production'
import { Pathner } from '../components/Pathner'
import { Row, Col } from 'antd';
import store from '../store/index'
import { productList1, productList2, productList3 } from '../mock/2';
var img1 = 'https://ftp.bmp.ovh/imgs/2021/04/ff8824bf623acce2.png'
var img2 = 'https://ftp.bmp.ovh/imgs/2021/04/2b3f6895ff145210.png'
var img3 = 'https://ftp.bmp.ovh/imgs/2021/04/edcaf123cc99befb.png'


class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            bbb: 1,
            username:''
        }
        console.log('home组件查看store数据')
        console.log(store.getState())
        this.state.username = store.getState().username
        // redux有一个缺点 vuex中 数据改变了前面不需要订阅监听 也能自动改变 但是react中的redux不行需要订阅


    }

    a = (e) => {

    }

    storeChange=(e)=>{
        console.log('storechange 变化了数据商店') 
        this.setState({
            username:store.getState().username
        },()=>{
            console.log('数据更新成功home')
            console.log(this.state.username)
        })
    }

    // 生命周期函数 
    componentDidMount(){
        // 页面渲染后 做一个数据商店的订阅 当数据商店的数据改变的时候 调用一个函数叫做
        // this.storeChange
        store.subscribe(this.storeChange)
    }

    render() {
        return (
            <div>
                {/* <Home></Home> */}
                <Header></Header>
                
                {/* 中间的content的部分 */}
                <div className='page-content'>
                    <Row style={{ marginTop: 30 }}>
                        <Col span={6}>
                            <div style={{ backgroundColor: '' }}>
                           
                                <SideMenu></SideMenu>
                            </div>
                        </Col>
                        <Col span={18}>
                            <div style={{ backgroundColor: 'skyblue' }}>
                                <Lunbo></Lunbo>
                            </div>
                        </Col>
                    </Row>
                    {/* 热门产品推荐 */}
                    <Production
                        title='热门推荐'
                        type={1}
                        sideImage={img1}
                        products={productList1}
                    >

                    </Production>


                    {/* 新产品推荐 */}



                    <Production
                        title='新品推荐'
                        type={2}
                        sideImage={img2}
                        products={productList2}
                    >

                    </Production>
                    {/* 新产品推荐 */}



                    {/* 城市推荐 */}
                    <Production
                        title='城市推荐'
                        type={3}
                        sideImage={img3}
                        products={productList3}
                    >

                    </Production>

                    {/* 城市推荐 */}
                    <Pathner></Pathner>
                </div>

              <Footer></Footer>  
                {/* {this.state.username} */}

            </div>
        )
    }
}


export default Home